<%@ taglib prefix="c" uri="http://java.sun.com/jsp/jstl/core" %>
<%@ page contentType="text/html;charset=UTF-8" language="java" %>
<!doctype html>
<html class="no-js" lang="">
<head>
    <jsp:include page="../layout/head.jsp">
        <jsp:param name="title" value="写文章"/>
        <jsp:param name="cssName" value="create-topic"/>
    </jsp:include>
    <link rel="stylesheet" href="${pageContext.request.contextPath}/public/front/styles/layout.css">
    <link rel="stylesheet" href="${pageContext.request.contextPath}/public/front/styles/create-topic.css">
    <link rel="stylesheet" href="${pageContext.request.contextPath}/public/front/styles/simditor.css">
</head>
<body>
<!--[if lt IE 10]>
<p class="browserupgrade">You are using an <strong>outdated</strong> browser. Please <a href="http://browsehappy.com/">upgrade
    your browser</a> to improve your experience.</p>
<![endif]-->

<jsp:include page="../layout/nav.jsp"/>

<div class="container">


    <div class="main">


        <div class="page-wrapper">

            <h1 class="title">添加文章</h1>
            <form action="${pageContext.request.contextPath}/topic/add" method="post" enctype="multipart/form-data" class="form-control">

                <div class="form-group">
                    <label for="title">标题</label>
                    <input type="text" id="title" name="title">
                </div>
                <div class="form-group">
                    <label for="category">类别</label>
                    <select class="category" id="category" name="categoryId" onchange="getTag(this.value)">
                        <option selected>请选择类别</option>
                        <c:forEach items="${categories}" var="category">
                            <option value="${category.id}">${category.name}</option>
                        </c:forEach>
                    </select>

                    <div class="tags">

                    </div>
                </div>
                <div class="form-group">
                    <label for="phone">描述</label>
                    <textarea id="phone" class="describe" name="describe"></textarea>
                </div>
                <div class="form-group form-fileUpload">
                    <label>选择标题图片</label>
                    <label for="fileUpload" class="fileUpload-btn btn btn-default">上传图片</label>
                    <input type="file" id="fileUpload" name="fileName">
                    <div class="preview">

                    </div>
                </div>
                <div class="form-group form-group-content">
                    <label for="txt-content">正文</label>
                    <textarea id="txt-content" name="content" data-autosave="editor-content" autofocus required></textarea>
                </div>


                <div class="btn-group">
                    <!--<button type="reset" class="btn btn-default">重置</button>-->
                    <button type="submit" class="btn btn-default">提交</button>
                </div>


            </form>

        </div>


    </div>

</div>
<jsp:include page="../layout/footer.jsp"/>
<script>

    function getTag(id) {
        $.ajax({
            url:"${pageContext.request.contextPath}/topic/getTags",
            type:"get",
            data:{'id':id},
            success:function (tags) {
                if(tags) {
                    tags =  JSON.parse(tags);
                    var _tag =  $(".tags");
                    _tag.html("");

                    for(var i =0 ; i< tags.length; i++) {
                        var tag = tags[i];
                        _tag.append("<input type=\"checkbox\" name=\"tag\" value=\""+tag.id+"\"> " + tag.name + "<br/>");
                    }

                }
            }
        });

    }

    $(function(){
        $('#fileUpload').change(function(){
            var file = this.files[0];    //选择上传的文件
            var r = new FileReader();
            r.readAsDataURL(file);    //Base64
            $(r).load(function(){
                $('.preview').html('<img src="'+ this.result +'" alt="" />');
            });
        });
    });
</script>
<script src="${pageContext.request.contextPath}/public/front/scripts/mobilecheck.js"></script>
<script src="${pageContext.request.contextPath}/public/front/scripts/module.min.js"></script>
<script src="${pageContext.request.contextPath}/public/front/scripts/uploader.min.js"></script>
<script src="${pageContext.request.contextPath}/public/front/scripts/hotkeys.min.js"></script>
<script src="${pageContext.request.contextPath}/public/front/scripts/simditor.min.js"></script>
<script src="${pageContext.request.contextPath}/public/front/scripts/page-demo.js"></script>
</body>
</html>
